<template>
    <div class="details">
        <div class="wrapper">
            <el-row>
                <el-col :span="12">
                    <h2 class="name">{{ data.name }}</h2>
                    <img class="img" :src="data.pic"/>
                    <div >
                        <h2 class="oth">描述</h2>
                        <span class="con">{{data.description}}</span>
                    </div>
                    <div >
                        <h2 class="oth">推荐餐厅</h2>
                        <span class="con" v-for=""></span>
                        <div v-for="item in data.list" >
                            <span class="con">{{item}}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <h2 class="name">当地美食特色推荐</h2>
                    <div
                            class="left"
                            v-for="item in findFoods"
                            :key="item.id"
                            @click="goDetail(item.id)"
                    >
                        <el-row>
                            <el-col :span="12"><div class="pic"><img width="300px" height="200px" :src="item.pic" /></div></el-col>
                            <el-col :span="12"><div class="name1">小吃名：{{ item.name }}</div>
                                <div class="name1">城市：{{ item.city }}</div></el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
    import { getFood,findTjFood } from "@/utils/request";
    export default {
        name: "FoodDetail",
        data() {
            return {
                id: "",
                data: {},
                queryParams: {
                    city: null,
                },
                findFoods:[]
            };
        },
        methods: {
            // 查询项目的详细信息
            findDetails() {
                // 数据交互
                getFood(this.id).then((res) => {
                    if (res.code == 200) {
                        this.data = res.data;
                        this.queryParams.city=res.data.city
                        findTjFood(this.queryParams).then((res) => {
                            if (res.code == 200) {
                                this.findFoods = res.data;
                            } else {
                                this.$message({
                                    type: "error",
                                    message: this.message,
                                });
                            }
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                        });
                    }
                });
            },findPageQueryFood() {

            },
        },
        created() {
            // 在页面加载的时候拿到数据
            // 拿到从上一个页面传过来的id值
            this.id = this.$route.query.id;
            this.findDetails();
            this.findPageQueryFood()
        },
    };
</script>

<style scoped lang='scss'>
    .details {
    .wrapper{

    .name {
        text-align: center;
        font-size: 30px;
        color: #0189ec;
    }
        .name1 {
            /*text-align: center;*/
            font-size: 18px;
            color: cornflowerblue;
        }
    .img{
        width: 600px;
        height: 400px;
    }
    .oth {
        /*text-align: center;*/
        font-size: 30px;
    }
    .con {
        font-size: 18px;
    }
    }
    }
</style>
